<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>模块管理</title>
    <!-- <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    /> -->
    <!-- Import all the bootstrap css files from css folder -->
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <!--  Import BootStrap Javascript -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/alpinejs.min.js" defer></script>
  </head>
  <body>
    <main>
      <div class="container my-4" x-data="fetchDeviceInfo()">
        <nav class="navbar navbar-expand-lg mt-2">
          <div class="container-fluid">
            <a class="navbar-brand" href="/"
              ><span class="mb-0 h4 fw-bold">模块管理</span></a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarText"
              aria-controls="navbarText"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="/">首页</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/network.html">网络</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/scanner.html">扫描</a>
                <li class="nav-item">
                  <a class="nav-link" href="/settings.html">设置</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/sms.html">短信</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/console">控制台</a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    href="/deviceinfo.html"
                    aria-current="page"
                    >设备信息</a
                  >
                </li>
              </ul>
              <span class="navbar-text">
                <button class="btn btn-link text-reset" id="darkModeToggle">
                  暗黑模式
                </button>
              </span>
            </div>
          </div>
        </nav>
        <div class="row mt-5 gap-3">
          <div class="col">
            <div class="card">
              <div class="card-header">设备信息</div>
              <div class="card-body">
                <div class="card-text">
                  <div class="table-responsive">
                    <table class="table">
                      <style>.table th,.table td {  white-space: nowrap; /* 防止换行 */}</style>
                      <tbody>
                        <tr>
                          <th scope="row">制造商</th>
                          <td x-text="manufacturer"></td>
                        </tr>
                        <tr>
                          <th scope="row">型号</th>
                          <td x-text="modelName"></td>
                        </tr>
                        <tr>
                          <th scope="row">固件版本</th>
                          <td class="col-md-2" x-text="firmwareVersion"></td>
                        </tr>
                        <tr>
                          <th scope="row">电话号码</th>
                          <td class="col-md-2" x-text="phoneNumber"></td>
                        </tr>
                        <tr>
                          <th scope="row">IMSI</th>
                          <td class="col-md-2" x-text="imsi"></td>
                        </tr>
                        <tr>
                          <th scope="row">ICCID</th>
                          <td class="col-md-2" x-text="iccid"></td>
                        </tr>
                        <tr>
                          <th scope="row">IMEI</th>
                          <td class="col-md-2">
                            <input
                              class="form-control"
                              type="text"
                              x-model="newImei"
                              x-bind:placeholder="imei === '-' ? '获取IMEI...' : imei"
                            />
                          </td>
                          <td>
                            <button
                              type="button"
                              class="btn btn-primary"
                              @click="openModal()"
                            >
                              更新
                            </button>
                          </td>
                        </tr>

                        <tr>
                          <th scope="row">LAN IP</th>
                          <td class="col-md-2" x-text="lanIp"></td>
                        </tr>
                        <tr>
                          <th scope="row">WWAN IPv<sup>4</sup></th>
                          <td class="col-md-2" x-text="wwanIpv4"></td>
                        </tr>
                        <tr>
                          <th scope="row">WWAN IPv<sup>6</sup></th>
                          <td class="col-md-2" x-text="wwanIpv6"></td>
                        </tr>
                        <tr>
                          <th scope="row">版本</th>
                          <td class="col-md-2">SimpleAdminRev-Alpha-0.9</td>
                        </tr>
                        <tr>
                          <th>项目贡献者</th>
                          <td>
                            <!-- Button trigger modal -->
                            <p
                              type="button"
                              class="link-info link-opacity-50-hover link-offset-2"
                              data-bs-toggle="modal"
                              data-bs-target="#staticBackdrop"
                            >
                              显示贡献者
                            </p>

                            <!-- Modal -->
                            <div
                              class="modal fade"
                              id="staticBackdrop"
                              data-bs-backdrop="static"
                              data-bs-keyboard="false"
                              tabindex="-1"
                              aria-labelledby="staticBackdropLabel"
                              aria-hidden="true"
                            >
                              <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h1
                                      class="modal-title fs-5"
                                      id="staticBackdropLabel"
                                    >
                                      Contributors
                                    </h1>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    ></button>
                                  </div>
                                  <div class="modal-body">
                                    <table>
                                      <tbody>
                                        <tr>
                                          <th>
                                            RGMII Toolkit and Documentation
                                          </th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/iamromulan"
                                              target="_blank"
                                              >iamromulan</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>Simple Admin 2.0</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/dr-dolomite"
                                              target="_blank"
                                              >dr-dolomite</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>SMS Feature</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/snjzb"
                                              target="_blank"
                                              >snjzb</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>Original Simple Admin</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/aesthernr"
                                              target="_blank"
                                              >aesthernr</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>Original Socat Bridge</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/natecarlson"
                                              target="_blank"
                                              >natecarlson</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>Original Simple Admin Fixes</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/rbflurry/"
                                              target="_blank"
                                              >rbflurry</a
                                            >
                                          </td>
                                        </tr>

                                        <tr>
                                          <th>SA Parsing Patch</th>
                                          <td class="col-md-2">
                                            <a
                                              href="https://github.com/tarunVreddy"
                                              target="_blank"
                                              >tarunVreddy</a
                                            >
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </div>
                                  <div class="modal-footer">
                                    <button
                                      type="button"
                                      class="btn btn-secondary"
                                      data-bs-dismiss="modal"
                                    >
                                      Close
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                Visit our
                <a
                  href="https://github.com/iamromulan/quectel-rgmii-toolkit/tree/development"
                  target="_blank"
                  class="text-reset"
                  >repository</a
                >
                or
                <a
                  href="https://github.com/iamromulan/quectel-rgmii-configuration-notes.git"
                  target="_blank"
                  class="text-reset"
                  >documentation</a
                >
                for more information. All rights reserved. 2024
              </div>
            </div>
          </div>
        </div>

        <!-- Loading Modal for Reboot -->
        <div class="modal-overlay" x-show="showModal">
          <div class="loading-modal">
            <div
              class="loading-text"
              style="display: flex; flex-direction: column"
            >
              <h3>This will reboot the modem.</h3>
              <p style="margin-top: 0.5rem">Continue?</p>
            </div>
            <div class="d-grid gap-2 d-md-block">
              <button
                class="btn btn-primary"
                type="button"
                @click="updateIMEI()"
              >
                Reboot
              </button>
              <button
                class="btn btn-danger"
                type="button"
                @click="closeModal()"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>

        <!-- Reboot Modal Countdown -->
        <div class="modal-overlay" x-show="isRebooting">
          <div class="loading-modal">
            <div class="loader"></div>
            <div
              class="loading-text"
              style="display: flex; flex-direction: column"
            >
              <h3>Rebooting...</h3>
              <p style="margin-top: 0.5rem">
                Please wait for
                <span x-text="countdown" style="font-weight: 500"></span>
                seconds.
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="js/dark-mode.js"></script>
    <script>
      function fetchDeviceInfo() {
        return {
          manufacturer: "-",
          modelName: "-",
          firmwareVersion: "-",
          imsi: "-",
          iccid: "-",
          imei: "-",
          newImei: null,
          lanIp: "-",
          wwanIpv4: "-",
          wwanIpv6: "-",
          phoneNumber: "无",
          simpleAdminVersion: "-",
          atcmd: null,
          atCommandResponse: "",
          showModal: false,
          isLoading: false,
          isRebooting: false,
          countdown: 3,

          sendATCommand() {
            if (!this.atcmd) {
              // Use ATI as default command
              console.log(
                "AT Command is empty, using ATI as default command: "
              );
            }

            this.isLoading = true;
            fetch(
              "/cgi-bin/get_atcommand?" +
                new URLSearchParams({
                  atcmd: this.atcmd,
                })
            )
              .then((res) => {
                return res.text();
              })
              .then((data) => {
                this.atCommandResponse = data;
              })
              .catch((error) => {
                console.error("Error: ", error);
                this.showError = true;
              });
          },

          fetchATCommand() {
            this.atcmd =
              'AT+CGMI;+CGMM;+QGMR;+CIMI;+ICCID;+CGSN;+QMAP="LANIP";+QMAP="WWAN";+CNUM';
            this.isLoading = true;
            fetch(
              "/cgi-bin/get_atcommand?" +
                new URLSearchParams({
                  atcmd: this.atcmd,
                })
            )
              .then((res) => {
                return res.text();
              })
              .then((data) => {
                this.atCommandResponse = data;
                this.parseFetchedData();
              })
              .catch((error) => {
                console.error("Error: ", error);
                this.showError = true;
              });
          },

          parseFetchedData() {
            const lines = this.atCommandResponse.split("\n");

            console.log("AT Command Response: ", lines);

            this.manufacturer = lines[1].trim();
            this.modelName = lines[3].trim();
            this.firmwareVersion = lines[5].trim();
            this.imei = lines[11].trim();
            this.lanIp = lines[13].trim().split(",")[3];
            this.wwanIpv4 = lines[15].trim().split(",")[4].replace(/"/g, "");
            this.wwanIpv6 = lines[16].trim().split(",")[4].replace(/"/g, "");

            try {
              this.imsi = lines[7].trim();
              this.iccid = lines[9].trim().replace("+ICCID: ", "");
              this.phoneNumber = lines[18]
                .trim()
                .split(",")[1]
                .replace(/"/g, "");

              if (this.phoneNumber === "") {
                this.phoneNumber = "Unknown";
              }
            } catch (error) {
              this.phoneNumber = "No SIM Card Inserted or Detected";
              this.imsi = " ";
              this.iccid = " ";
            }

            this.simpleAdminVersion = "SimpleAdminRev-Beta-1.0";
            this.isLoading = false;
          },

          updateIMEI() {
            this.atcmd = `AT+EGMR=1,7,"${this.newImei}"`;
            this.sendATCommand();
            this.rebootDevice();
          },

          rebootDevice() {
            this.atcmd = "AT+CFUN=1,1";
            this.sendATCommand();

            this.isLoading = true;
            this.showModal = false;
            this.isRebooting = true;
            this.countdown = 40;
            const interval = setInterval(() => {
              this.countdown--;
              if (this.countdown === 0) {
                clearInterval(interval);
                this.isLoading = false;
                this.showModal = false;
                this.isRebooting = false;
                this.init();
              }
            }, 1000);
          },

          openModal() {
            if (!this.newImei) {
              alert("No new IMEI provided.");
              return;
            }

            if (this.newImei.length !== 15) {
              alert("IMEI is invalid");
              return;
            }

            if (this.newImei === this.imei) {
              alert("IMEI is the same as the current IMEI");
              return;
            }

            this.showModal = true;
          },

          closeModal() {
            this.showModal = false;
          },

          init() {
            this.fetchATCommand();
          },
        };
      }
    </script>
  </body>
</html>
